<template>
  <div class="content">
    <div class="category">
      <div
        class="category__item"
        v-for="item in categoryList"
        :key="item.id"
        @click="highlight(item.tab)"
        :class="{ highlight: tab === item.tab }"
      >{{item.name}}</div>
    </div>
    <div class="product">
      <div class="product__item" v-for="item in contentList" :key="item._id">
        <img class="product__img" :src="item.imgUrl" alt="" />
        <div class="product__detail">
          <h4 class="product__detail__title">{{ item.name }}</h4>
          <p class="product__detail__sales">月售{{ item.sales }}件</p>
          <p class="product__detail__price">
            <span class="price">￥{{ item.price }}</span>
            <span class="origin">￥{{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="product__number">
          <span class="product__number__minus iconfont" @click="minus(shopId,item._id,item)">&#xe8b1;</span>
          {{cart?.[shopId]?.[item._id]?.count ||0}}
          <span class="product__number__plus iconfont" @click="plus(shopId,item._id,item)">&#xe781;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { get } from "../../utils/utils";
export default {
  name: "Content",
  props:['shopId'],
  data() {
    return {
      contentList: {},
      tab:'all',
      cart:this.$store.state.cart,
      categoryList: [
        {
          name: "全部商品",
          tab: "all",
          id: 1,
        },
        {
          name: "秒杀",
          tab: "seckill",
          id: 2,
        },
        {
          name: "新鲜水果",
          tab: "fruit",
          id: 3,
        },
      ],
    };
  },
  methods: {
    minus(shopId,productId,product){
      this.$store.commit('MINUS',{shopId,productId,product})
    },
    plus(shopId,productId,product){
      this.$store.commit('PLUS',{shopId,productId,product})

    },
    highlight(tab) {
      this.tab = tab;
    },
  },
  watch: {
    tab: {
      immediate: true,
      handler() {
        get(`/api/shop/${this.id}/products`, {
          tab: this.tab,
        }).then(({ data }) => {
          this.contentList = data;
        });
      },
    },

  },
};
</script>

<style lang="scss" scoped>

.highlight {
  background-color: #fff;
}
.content {
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  top: 1.6rem;
  bottom: 0.5rem;
}
.category {
  overflow-y: scroll;
  height: 100%;
  width: 0.76rem;
  background-color: #f5f5f5;
  &__item {
    height: 0.4rem;
    width: 0.76rem;
    line-height: 0.4rem;
    text-align: center;
    color: #333;
  }
  
}
.product {
  overflow-y: scroll;
  flex: 1;
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid #f1f1f1;
  }
  &__img {
    height: 0.68rem;
    width: 0.68rem;
    margin-right: 0.16rem;
  }
  &__detail {
    &__title {
      font-size: 0.14rem;
      color: #333333;
      margin: 0;
    }
    &__sales {
      margin: 0.1rem 0;
      font-size: 0.12rem;
      color: #333333;
      line-height: 0.16rem;
    }
    &__price {
      margin: 0;
    }
  }
  &__number {
    position: absolute;
    right: 0.18rem;
    bottom: 0.12rem;
    font-size: 0.18rem;
    &__minus {
      font-size: 0.2rem;
    }
    &__plus {
      font-size: 0.2rem;
    }
  }
}
.price {
  font-size: 0.14rem;
  color: #e93b3b;
  line-height: 0.2rem;
}
.origin {
  font-size: 0.1rem;
  color: #999999;
  text-decoration: line-through;
  line-height: 0.2rem;
  margin-left: 0.12rem;
}
</style>